<template>
  <div>
    <div class="screen">
      <div class="box show" value="0" id="box1" style="margin-left: 8.8%;margin-top: 33px;" @click="show('box1')">
        全部
      </div>
      <div class="box" value="1" id="box2" style="margin-top: -70px;margin-left: 31.6%;" @click="show('box2')">
        故事
      </div>
      <div class="box" value="2" id="box3" style="margin-top: -70px;margin-left: 54.6%;" @click="show('box3')">
        问答
      </div>
      <div class="box" value="3" id="box4" style="margin-top: -70px;margin-left: 77.2%;" @click="show('box4')">
        展示
      </div>
    </div>
    <br>
    <div v-for="item in content" :key="item.id">
      <div class="message" >
      <br>
      <img :src="item.userImg" alt="">
      <div class="displayArea">
        <div style="font-weight: 900;">{{ item.writer }}</div>
        <div style="font-size: small;color: rgb(180,166,167);">{{ item.pubData }}</div>
        <br>
        <div>
          <span class="title">
            {{ item.passage }}
          </span>
          <span style="margin-left: 90%;font-weight: 900;" @click="details(item.id)">
            了解详情
          </span>
        </div>
        <br>
        <div style="display: flex;">
          <img :src="img" alt="" class="showImg" v-for="(img,index) in item.imgurl" :key="index">
        </div>
        <br>
        <span style="display: flex;">
          <img src="../../public/img/rewiew.png" alt="" class="show1" style="margin-left: 10%;">
          &ensp;
          <p>{{ item.commentNumber }}</p>
          <img src="../../public/img/like.png" alt="" class="show1" style="margin-left: 27%;">
          &ensp;
          <p>{{ item.likes }}</p>
          <img src="../../public/img/collect.png" alt="" class="show1" style="margin-left: 30%;">
          &ensp;
          <p>{{ item.collectNumber }}</p>
        </span>
      </div>
      <br>
    </div>
    <br>
    </div>
    <div style="margin: auto;">
      <el-dialog v-model="dialogSubmit" title="" width="500" style="text-align: center;">
        <el-form :model="form">
          <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input v-model="newContent.title" autocomplete="off" />
          </el-form-item>
          <el-form-item label="内容" :label-width="formLabelWidth">
            <el-input
              v-model="newContent.passage"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              placeholder="请输入你要发布的内容"
            />
          </el-form-item>
          <el-form-item label="标签" :label-width="formLabelWidth">
            <el-select v-model="newContent.catalogue" placeholder="选择标签">
              <el-option label="故事" value="故事" />
              <el-option label="问答" value="问答" />
              <el-option label="展示" value="展示" />
            </el-select>
          </el-form-item>
          <el-form-item label="图片" :label-width="formLabelWidth">
            <el-upload
              ref="uploadRef"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :auto-upload="false"
              :before-upload="handleBeforeUpload"
              multiple
              :limit="3"
              v-model:file-list="fileList"
            >
              <el-icon><Plus /></el-icon>
              <template #tip>
                <div class="el-upload__tip">
                  图片最大内存不超过2MB，数量不超过3张
                </div>
              </template>
            </el-upload>

            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="clear()">
              清除
            </el-button>
            <el-button type="primary" @click="publish()">
              发布
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <button @click="dialogSubmit = true" id="popopButton">发布文章</button>
  </div>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import {ref,reactive,onMounted} from 'vue'
import axios from '../utils/axios';
import { UploadFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {useRouter} from 'vue-router'
let router = useRouter()
let content = ref([])
const uploadRef = ref()
let newContent = reactive({
  title: '',
  catalogue: '',
  passage: ''
})
let value = ref('0')
let dialogSubmit = ref(false)
const fileList = reactive([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handlePictureCardPreview= (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}
onMounted(() => {
  getContent()
})
async function getContent() {
  const {data} = await axios.get(`gettext?value=${value.value}`)
  content.value = data.data
}
function show(id){
  document.querySelector('.show').classList.remove('show')
  document.querySelector(`#${id}`).classList.add('show')
  value.value = document.querySelector(`#${id}`).getAttribute("value")
  getContent()
}
async function publish(){
  uploadRef.value.submit()
  let formData = new FormData()
  for(const file of fileList){
    formData.append('files',file)
  }
  formData.append('content',JSON.stringify(newContent))
  if(!(newContent.title && newContent.catalogue && newContent.passage)){
    ElMessage({
      message:'请完善信息',
      type: 'error',
      center: true,
      duration: 1000
    })
    return
  }
  const {data} = await axios.post('loadContext',formData,{
    headers:{
      'Content-Type' : 'multipart/form-data'
    }
  })
  if(data.success){
    ElMessage({
      message:'发布成功',
      type: 'success',
      center: true,
      duration: 1000
    })
    setTimeout(() => {
      dialogSubmit.value = false
      getContent()
      clear()
    },1000)
  }
  else{
    ElMessage({
      message:'发布失败',
      type: 'error',
      center: true,
      duration: 1000
    })
  }
}
function clear(){
  newContent.title = ''
  newContent.catalogue = ''
  newContent.passage = ''
  uploadRef.value.clearFiles()
}
function handleBeforeUpload(file){
  fileList.push(file)
  return false
}
function details(id){
  router.push({name:"article",params:{id:id}})
}
</script>

<style scoped>
.screen{
  width: 70%;
  border: 1px solid black;
  height: 200px;
  margin-left: 15%;
  color: #fff;
}
.box{
  width: 14%;
  height: 70px;
  text-align: center;
  line-height: 70px;
}
.show{
  border: 1px solid blue;
  color: blue;
}
.message{
  width: 70%;
  border: 1px solid black;
  margin-left: 15%;
  background-color: #e9e9eb;
}
.message img{
  width: 7%;
  margin-left: 6%;
}
.displayArea{
  width: 73%;
  margin-left: 14%;
  margin-top: -45px;
}
.title{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.message .showImg{
  width: 30%;
  margin-left: 2%;
}
.message .show1{
  width: 3.5%;
  vertical-align: middle;
}
#popopButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px;
  background-color: #ff7f50;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
</style>